Le flux HTML
Le flux HTML est le phénomène qui fait que naturellement les éléments cherchent toujours à aller le plus en haut et le plus à gauche possible dans une page web.
Changer le positionnement d'un élément
Il existe plusieurs états de "positionnement" permettant de modifier le comportement d'un élément par rapport au flux, permettant ainsi par exemple en le sortant du flux de le faire aller par dessus d'autres éléments.
- Élément en position static : comportement par défaut des éléments dans le flux
- Élément en position relative : l'élément reste dans le flux comme en static mais peut être déplacé (avec top/left/right/bottom) en dehors de l'emplacement de sa propre position
- Élément en position absolute : l'élément est complètement sorti du flux et peut être positionné librement (avec top/left/right/bottom) relativement à son parent non static le plus proche
- Élément en position fixed : l'élément est complètement sorti du flux et peut être positionné librement (avec top/left/right/bottom) relativement à la fenêtre du navigateur
- Élément en position sticky : l'élément sort du flux de son parent (avec top/left/right/bottom), tout en restant dans ses limites.
En savoir plus sur les positions : https://developer.mozilla.org/fr/docs/Web/CSS/position
/* Cet élément sera positionné 50 pixels plus bas et 200 pixels plus à droite que son emplacement prévu normalement dans la page web */
.element{
position: relative;
top: 50px;
left: 200px;
}
/* Dans son parent non static le plus proche, cet élément sera 200px plus bas et 400px plus à droite */
.element{
position: absolute;
top: 200px;
left: 400px;
}
/* Cet élément sera positionné en bas à droite de la fenêtre du navigateur à 25px du bord droit et 25 px du bord inférieur */
.element{
position: fixed;
bottom: 25px;
right: 25px;
}
Ordre de superposition
Si des éléments se chevauchent, on peut changer la priorité de superposition grâce à la propriété z-index :
/* Cet élément à un z-index plus élevé que l'autre, donc en cas de superposition il sera obligatoirement au dessus de lui */
.first-element{
z-index: 100;
}
.second-element{
z-index: 50;
}